<template>
  <div class="wrapper">
    <div class="year-select">
      <span @click="showYearPicker = true" class="label">年份选择：</span>
      <span @click="showYearPicker = true">{{ queryForm.year }}年</span>
      <img src="@/assets/common/arrow-down.png" />
    </div>
    <div class="quarter">
      <div class="quarter-item" v-for="(item, index) in quarterList" :key="index" :class="{ active: queryForm.quarter - 1 == index }" @click="onQuarter(index)">{{ item }}季度</div>
    </div>
    <PullRefreshList v-if="ready" ref="PullRefreshList" :limit="page.size" :page-no.sync="page.index" :data.sync="showList" @getList="onLoad">
      <div class="list">
        <achievement-item v-for="(item, index) in showList" :content="item" :key="index" />
      </div>
    </PullRefreshList>
    <van-popup v-model="showYearPicker" position="bottom">
      <van-picker :default-index="yearIndex" title="选择年份" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showYearPicker = false" />
    </van-popup>
  </div>
</template>

<script>
import achievementItem from "./achievement-item.vue";
import { getReportShowList } from "@/api/report";
import PullRefreshList from "@/components/PullRefreshList";
export default {
  components: {
    achievementItem,
    PullRefreshList
  },
  data() {
    return {
      showYearPicker: false,
      columns: [],
      yearIndex: 0,
      quarterList: ["一", "二", "三", "四"],
      queryForm: {
        deptId: 0,
        year: 0,
        quarter: 1
      },
      startYear: 2019,
      dataList: [],
      showList: [],
      page: {
        size: 10,
        index: 1
      },
      ready: false
    };
  },
  created() {
    this.queryForm.deptId = this.$route.query.deptId;
    let current = new Date();
    let year = current.getFullYear();
    let month = current.getMonth() + 1;
    this.queryForm.quarter = Math.floor(month % 3 == 0 ? month / 3 : month / 3 + 1);
    this.queryForm.year = year;
    for (let i = this.startYear; i <= year; i++) {
      this.columns.push(i);
    }
    this.yearIndex = this.columns.length - 1;
    this.getList();
  },
  methods: {
    onLoad(callback) {
      let list = this.dataList.slice((this.page.index - 1) * this.page.size, this.page.index * this.page.size);
      callback(list);
    },
    onConfirm(val) {
      this.queryForm.year = val;
      this.showYearPicker = false;
      this.getList();
    },
    onQuarter(index) {
      this.queryForm.quarter = index + 1;
      this.getList();
    },
    getList() {
      getReportShowList(this.queryForm).then(res => {
        this.dataList = res.data;
        this.ready = true;
        this.$nextTick(() => {
          this.$refs.PullRefreshList.onSearch();
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  padding: 20px 16px;
  line-height: 20px;
  color: #333;
  font-size: 14px;
}
.year-select {
  display: flex;
  align-items: center;
  .label {
    color: #999999;
    margin-right: 8px;
  }
  img {
    width: 12px;
    margin-left: 8px;
  }
}
.list {
  margin-top: 12px;
}
.quarter {
  display: flex;
  align-items: center;
  line-height: 26px;
  color: #b2b2b2;
  font-size: 13px;
  margin-top: 10px;
  margin-bottom: 16px;
  .quarter-item {
    width: 60px;
    background: #f0f0f0;
    border-radius: 4px;
    margin-right: 12px;
    text-align: center;
    &.active {
      color: #fff;
      background: #2492ff;
    }
  }
}
</style>
